@import "variable";

/*图标布局*/
//图标
.fb-sprite {
  position: relative;
  display: block;
  background: url("@{img-path}/sprite.png") no-repeat;
}

.icon-qq {
  width: 15px;
  height: 17px;
  background-position: -165px -1px;
  margin: -9px 0 0 -8px;
  &.line {
    background-position: -165px -47px;
    margin: -9px 0 0 -8px;
  }
  &.active {
    background-position: -165px -23px;
  }
  &.contact {
    width: 20px;
    height: 21px;
    background-position: -138px 0;
    margin: -11px 0 0 0;
  }
}

.icon-wx {
  width: 20px;
  height: 17px;
  background-position: -1px -64px;
  margin: -9px 0 0 -10px;
  &.contact {
    background-position: -138px -27px;
    margin: -9px 0 0 0;
  }
  &.color {
    background-position: -1px -123px;
    margin: 0;
    &.active {
      background-position: -29px -123px;
    }
  }
}

.icon-zx {
  width: 17px;
  height: 14px;
  background-position: -1px -90px;
  margin: -7px 0 0 -9px;
  &.color {
    width: 18px;
    height: 17px;
    background-position: -1px -144px;
    &.active {
      background-position: -1px -167px;
    }
  }
}

.icon-area {
  width: 18px;
  height: 24px;
  background-position: -32px -31px;
  margin: -12px 0 0 -9px;
  &.contact {
    width: 15px;
    height: 20px;
    background-position: -138px -97px;
    margin: -10px 0 0 0;
  }
}

.icon-email {
  width: 24px;
  height: 19px;
  background-position: -32px -1px;
  margin: -10px 0 0 -12px;
  &.contact {
    width: 20px;
    height: 14px;
    background-position: -138px -50px;
    margin: -7px 0 0 0;
  }
}

.icon-phone {
  width: 20px;
  height: 20px;
  background-position: -1px -1px;
  margin: -10px 0 0 -12px;
  &.contact {
    width: 20px;
    height: 20px;
    background-position: -138px -70px;
    margin: -10px 0 0 0;
  }
}

.icon-top {
  width: 26px;
  height: 14px;
  background-position: -174px -184px;
  margin: -7px 0 0 -13px;
}

.icon-mobile {
  width: 17px;
  height: 26px;
  background-position: -32px -64px;
  margin: -13px 0 0 -9px;
}

.icon-password {
  width: 15px;
  height: 20px;
  background-position: -32px -97px;
  margin: -10px 0 0 -8px;
}

.icon-checked {
  width: 15px;
  height: 10px;
  background-position: -63px -1px;
  margin: -5px 0 0 -8px;
}

.icon-search {
  width: 20px;
  height: 20px;
  background-position: -63px -20px;
  margin: -10px 0 0 -10px;
}

.icon-refresh {
  width: 17px;
  height: 20px;
  background-position: -65px -48px;
}

.icon-zan {
  width: 16px;
  height: 16px;
  background-position: -92px -1px;
  margin: -8px 0 0 0;
  &.active {
    background-position: -92px -23px;
  }
}

.icon-collect {
  width: 16px;
  height: 15px;
  background-position: -92px -46px;
  margin: -8px 0 0 0;
  &.active {
    background-position: -92px -68px;
  }
  &.opacity {
    background-position: -65px -75px;
    margin: -7px 0 0 -8px;
  }
}

.icon-see {
  width: 16px;
  height: 10px;
  background-position: -92px -90px;
  margin: -5px 0 0 0;
  &.active {
    background-position: -92px -107px;
  }
}

.icon-delete {
  width: 16px;
  height: 15px;
  background-position: -92px -124px;
  margin: -8px 0 0 0;
}

.icon-share {
  width: 16px;
  height: 16px;
  background-position: -29px -145px;
  margin: -8px 0 0 0;
  &.active {
    background-position: -29px -168px;
  }
}

.icon-edit {
  width: 14px;
  height: 16px;
  background-position: -92px -145px;
  margin: -8px 0 0 0;
  &.active {
    background-position: -92px -168px;
  }
  &.white{
    width: 18px;
    height: 18px;
    background-position: -112px -121px;
    margin: -9px 0 0 -9px;
  }
}

.icon-store-phone {
  width: 16px;
  height: 16px;
  background-position: -115px -45px;
  margin-top: -8px;
}

.icon-store-area {
  width: 12px;
  height: 18px;
  background-position: -115px -22px;
  margin-top: -9px;
}

.icon-store-nav {
  width: 16px;
  height: 16px;
  background-position: -115px -1px;
  margin-top: -8px;
  &.gray{
    background-position: -112px -146px;
  }
}

.icon-rank1 {
  width: 15px;
  height: 14px;
  background-position: -65px -97px;
}

.icon-rank2 {
  width: 15px;
  height: 14px;
  background-position: -65px -117px;
}

.icon-rank3 {
  width: 15px;
  height: 14px;
  background-position: -65px -135px;
}

.icon-member {
  width: 15px;
  height: 15px;
  background-position: -184px 0;
  &.active {
    background-position: -184px -19px;
  }
}

.icon-stylist {
  width: 15px;
  height: 15px;
  background-position: -184px -39px;
  &.active {
    background-position: -184px -59px;
  }
}

.icon-personal {
  width: 20px;
  height: 25px;
  background-position: -111px -90px;
}

.icon-tips {
  width: 15px;
  height: 15px;
  background-position: -184px -80px;
}

.icon-company {
  width: 16px;
  height: 14px;
  background-position: -184px -101px;
}

.icon-card {
  width: 21px;
  height: 14px;
  background-position: -179px -121px;
}

.icon-upload{
  width: 24px;
  height: 18px;
  background-position: -176px -140px;
}

.icon-cause{
  width: 12px;
  height: 12px;
  background-position: -139px -123px;
  &.big{
    width: 24px;
    height: 24px;
    background-position: -138px -143px;
  }
}